<template>
  <div class="all">
    <el-table :data="pagination.records" border>
      <el-table-column fixed="left" prop="studentName" label="姓名" width="180"></el-table-column>
      <el-table-column prop="institute" label="学院" width="200"></el-table-column>
      <el-table-column prop="major" label="专业" width="200"></el-table-column>
      <el-table-column prop="grade" label="年级" width="200"></el-table-column>
      <el-table-column prop="clazz" label="班级" width="100"></el-table-column>
      <el-table-column prop="sex" label="性别" width="120"></el-table-column>
      <el-table-column prop="tel" label="联系方式" width="120"></el-table-column>
      <el-table-column fixed="right" label="查看成绩" width="150">
        <template v-slot:default="scope">
          <el-button @click="checkGrade(scope.row.studentId)" type="primary" size="small">查看成绩</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.current"
      :page-sizes="[6, 10]"
      :page-size="pagination.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
      class="page"
    ></el-pagination>
  </div>
</template>

<script>
import { ref, onMounted, getCurrentInstance } from 'vue'; // 引入 getCurrentInstance

export default {
  setup() {
    const pagination = ref({
      current: 1, // 当前页
      total: null, // 记录条数
      size: 6, // 每页条数
      records: [] // 表格数据
    });

    // 获取当前 Vue 实例的上下文，访问 $axios 和 $router
    const { proxy } = getCurrentInstance();

    // 获取学生信息
    const getAnswerInfo = async () => {
      try {
        const res = await proxy.$axios(`/api/students/${pagination.value.current}/${pagination.value.size}`);
        pagination.value = res.data.data;
      } catch (error) {
        console.log(error);
      }
    };

    // 改变记录条数
    const handleSizeChange = (val) => {
      pagination.value.size = val;
      getAnswerInfo();
    };

    // 改变当前页码
    const handleCurrentChange = (val) => {
      pagination.value.current = val;
      getAnswerInfo();
    };

    // 查看成绩
    const checkGrade = (studentId) => {
      proxy.$router.push({ path: '/index/grade', query: { studentId } });
    };

    // 在组件挂载时请求数据
    onMounted(() => {
      getAnswerInfo();
    });

    // 返回需要暴露给模板的变量和方法
    return {
      pagination,
      handleSizeChange,
      handleCurrentChange,
      checkGrade
    };
  }
};
</script>

<style lang="less" scoped>
.all {
  padding: 0px 40px;
  .page {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .edit {
    margin-left: 20px;
  }
  .el-table tr {
    background-color: #dd5862 !important;
  }
}
.el-table .warning-row {
  background: #000 !important;
}

.el-table .success-row {
  background: #dd5862;
}
</style>
